<template>
  <div>
    <button
      :class="{
        n: type === 'n',
        success: type === 'success',
        info: type === 'info',
        warning: type === 'warning',
        danger: type === 'danger',
      }"
      :style="{ backgroundColor: color }"
      v-if="flag"
    >
      <span><slot>按钮</slot></span>
    </button>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      flag: true,
    };
  },
  props: {
    type: {
      type: String,
      default: "n",
    },
    color: {
      type: String,
    },
  },
  created() {},
  computed: {},
  methods: {},
};
</script>
<style lang='less'  scoped>
button {
  width: 100px;
  height: 40px;
  border-radius: 20px;
}
.n {
  background-color: rgb(2, 2, 255, 0.2);
  span {
    color: rgb(0, 0, 63);
  }
}
.success {
  background-color: rgb(7, 255, 7, 0.5);
  span {
    color: rgb(7, 102, 7);
  }
}
.info {
  background-color: rgb(128, 128, 128, 0.5);
  span {
    color: rgb(0, 0, 0);
  }
}
.warning {
  background-color: rgba(255, 166, 0, 0.5);
  span {
    color: rgba(255, 166, 0);
  }
}
.danger {
  background-color: rgba(255, 0, 0, 0.5);
  span {
    color: rgba(255, 0, 0);
  }
}
</style>
